<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:
>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper/swiper-4.1.6.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/rem.css"/>
    <link rel="stylesheet" href="../js/map/DrawingManager_min.css">
    <style>
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .fushanBigDiv {
            width: 100%;
            height: 100%;
            background: url('../image/bj.png') no-repeat;
            background-size: 100% 100%;
            position: relative;
        }

        .fushanin {
            position: absolute;
            left: 50%;
            margin-left: -330px;
            top: 12rem;
            width: 660px;
            height: 422px;
            background: url('../image/signin_bj.png') no-repeat;
        }

        .fushaninbig {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .top {
            position: absolute;
            width: 400px;
            margin-left: 150px;
            margin-top: 50px;
            height: 42px;
            padding-left: 68px;
            color: #00aef4;
            font-size: 30px;
            line-height: 42px;
            background: url('../image/logo.png') 10px center no-repeat;
        }

        .user {
            position: absolute;
            width: 400px;
            margin-left: 124px;
            top: 127px;
            height: 52px;
            line-height: 52px;
            background: url('../image/loginbox.png') center no-repeat;
            border: none;
            color: #2b89fb;
            font-size: 16px;
            padding-left: 50px;
            box-sizing: border-box;
        }

        .user_icon {
            position: absolute;
            z-index: 90;
            width: 24px;
            top: 140px;
            left: 145px;
            height: 24px;
            background: url('../image/usericon.png') center no-repeat;
        }

        .password {
            position: absolute;
            width: 400px;
            margin-left: 124px;
            top: 203px;
            height: 52px;
            line-height: 52px;
            background: url('../image/loginbox.png') center no-repeat;
            border: none;
            color: #2b89fb;
            font-size: 16px;
            padding-left: 50px;
            box-sizing: border-box;
        }

        .passwordicon {
            position: absolute;
            z-index: 90;
            width: 24px;
            top: 216px;
            left: 145px;
            height: 24px;
            background: url('../image/passwordicon.png') center no-repeat;
        }

        .btn_log {
            position: absolute;
            width: 420px;
            height: 76px;
            top: 293px;
            left: 50%;
            margin-left: -210px;
            text-indent: 173px;
            color: #fff;
            line-height: 54px;
            font-size: 20px;
            background: url('../image/loginbox_bj.png') center no-repeat;
            cursor: pointer;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #2b89fb;
        }

        input:-moz-placeholder,
        textarea:-moz-placeholder {
            color: #2b89fb
        }

        input::-moz-placeholder,
        textarea::-moz-placeholder {
            color: #2b89fb
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #2b89fb
        }
    </style>
</head>

<body>
<div id="app" v-cloak>
    <div class="fushanBigDiv">
        <div class="fushanin">
            <div class="fushaninbig">
                <div class="top">福山公安数据治理系统</div>
                <input class="user" v-model.trim="user_name" align="middle" type="text" placeholder="账号">
                <i class="user_icon"></i>
                <input class="password" v-model.trim="user_password" align="middle" type="password" placeholder="密码"
                       @keyup.enter="login()">
                <i class="passwordicon"></i>
                <div class="btn_log" @click="login()">登录</div>
            </div>
        </div>
    </div>
</div>
<!-- 引入组件库 -->
<!-- <script type="text/javascript" src="./js/vue/vue.js"></script> -->
<script type="text/javascript" src="../js/vue/vue.js"></script>
<script src="../js/jquery-3.0.0.min.js.js"></script>

<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

<script type="text/javascript" src="../js/element/element.js"></script>
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->

<script type="text/javascript" src="../js/swiper/swiper-4.1.6.min.js"></script>
<script type="text/javascript" src="../js/urls.js"></script>

<script src="../js/axios.min.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>

<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->


<script type="text/javascript">
    var vm;
    vm = new Vue({
        el: '#app',
        data: {
            msg: 'Login',
            data: [],
            user_name: '',
            user_password: ''
        },
        created: function () {
        },
        mounted: function () {
        },
        methods: {
            login() {
                if (this.user_name === '') {
                    this.$NotifyUtil({
                        title: '警告',
                        message: '用户名不能为空',
                        type: 'error'
                    })
                    return false
                }
                if (this.user_password === '') {
                    this.$NotifyUtil({
                        title: '警告',
                        message: '密码不能为空',
                        type: 'error'
                    })
                    return false
                }
                let data = {
                    userXname: this.user_name,
                    userPassword: this.user_password
                }
                let option = {
                    method: 'POST',
                    url: 'sys/sysUser/login.do',
                    data: data
                }
                this.$HttpUtil(option, res => {
                    if (res.code === 0) {
                        this.$NotifyUtil({
                            title: '成功',
                            message: '登陆成功',
                            type: 'success'
                        })
                        console.log(res)

                        localStorage.uerid = res.data.id
                        localStorage.setItem('userData', res.data)
                        // this.$router.push({
                        //     path: '/Bighome'
                        // })
                        window.location = './bigHome2.html'
                    } else {
                        this.$NotifyUtil({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })
            }
        }
    })
</script>
</body>

</html>